<template>
  <div>
    <el-card>
      <el-row>
        <span style="font-size: 23px;font-weight: bold">服务分类管理</span>
      </el-row>
    </el-card>
    <div style="padding: 20px">
      <el-card>
        <el-row style="display: flex;align-items: center;padding: 15px 0px 15px 0px">
          <span>分类名称：</span>
          <el-input placeholder="请输入分类名称"
                    class="w-200"
                    v-model="state.table.where.name"/>
          <span class="ml10">类型：</span>
          <el-select v-model="state.table.where.type" placeholder="请选择服务类型">
            <el-option label="全部" value=""/>
            <el-option label="基础服务" value="0"/>
            <el-option label="拓展服务" value="1"/>
          </el-select>
          <el-button class="btn ml10"
                     type="primary"
                     @click="page.load()">
            <el-icon>
              <elementSearch/>
            </el-icon>
            搜索
          </el-button>
          <el-button class="btn" @click="page.reset()">
            <el-icon>
              <elementRefreshRight/>
            </el-icon>
            重置
          </el-button>
        </el-row>
        <el-row>
          <el-button class="btn"
                     type="primary"
                     @click="page.add()">
            <el-icon>
              <elementPlus/>
            </el-icon>
            新增
          </el-button>
        </el-row>
        <ld-table ref="tableRef"
                      url="/api/entService/info/query/page"
                      :columns="state.table.column"
                      :where="state.table.where"
                      :isTableTitle="false"
                      :isShowData="true"
                      :isPage="true">
          <template #action="scope">
            <el-link class="ml10"
                     size="small"
                     type="primary"
                     :underline="false"
                     @click=" page.openForm({id:scope.row.id})">
              编辑
            </el-link>
            <el-link class="ml10"
                     size="small"
                     type="danger"
                     :underline="false"
                     @click="page.remove(scope.row.id)">
              删除
            </el-link>
          </template>
        </ld-table>
      </el-card>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {reactive, getCurrentInstance, ref, onMounted} from "vue";
import {useRouter, useRoute} from "vue-router";
import {serviceType} from "./dictionary/column";
import {removeSvInfo} from "/src/api/entService/serviceInfo";

const {proxy} = getCurrentInstance() as any;
const router = useRouter();
const route = useRoute();
const tableRef = ref();

const state = reactive({
  table: {
    column: serviceType,
    where: {
      name: "",
      type: "",
      orderColumn: "create_time",
      orderFormat: "desc"
    }
  },
});
const page = {
  reset: () => {
    state.table.where.name = "";
    state.table.where.type = "";
  },
  load: () => {
    tableRef.value.load();
  },
  remove: (keyValue: string) => {
    proxy.$wigem.confirm("是否删除？").then((res) => {
      removeSvInfo(keyValue).then((res) => {
        if (res.success) {
          proxy.$wigem.alert.success(res.msg);
          page.load()
        } else {
          proxy.$wigem.alert.error("删除失败");
        }
      })
    });
  },
  add: () => {
    page.openForm();
  },
  openForm: (params?: object) => {
    router.push({
      name: "serviceTypeForm",
      query: params
    })
  },
};

onMounted(() => {
});

</script>
<style lang="scss" scoped>

::v-deep(.el-card__body) {
  padding: 10px 20px 0 30px;
}

.custom-tabs {
  display: flex;
  gap: 10px;
  font-size: 20px;

  .custom-tab-btn {
    padding: 8px 16px;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
  }

  .custom-tab-btn.active {
    color: #409eff;
    border-bottom: 2px solid #409eff;
  }
}
</style>
